<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('变量列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            变量名称：<input type="text" name="variName"/>
                        </li>
                        <li>
                            变量类型：<select name="variType" id = "variTypeSelect" >
                            <option value="">所有</option>
                        </select>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <button type="button" class="btn btn-success" onclick="openAdd()" >
                <i class="fa fa-plus"   >新增</i>
            </button>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>

        <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated bounceInRight">
                    <div class="modal-header">
                        <h4 class="modal-title">变量配置</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal m" id="form-role-add">
                            <input class="form-control" type="hidden" name="id" id="id" >
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">变量类型：</label>
                                <div class="col-sm-8">
                                    <select class="form-control"  name="variType" id = "variTypeSelectForm" >
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">变量名称：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" name="variName" id="variName" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">变量标识：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" name="variKey" id="variKey" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">变量值：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" name="variValue" id="variValue" required>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    $(function() {
        $.operate.get(ctx+"vari/listVariTyes",function (res) {
            $.each(res.data, function(index, item) {
                $('#variTypeSelect').append('<option value="' + item.value + '">' + item.name + '</option>');
                $('#variTypeSelectForm').append('<option value="' + item.value + '">' + item.name + '</option>');

            });
            setTimeout(function() {
                initMyTables();
            }, 100);
        })
    });
    

    

    /**
     * 初始化表格
     */
    function initMyTables(){
        var options = {
            showSearch: false,
            showPageGo: false,
            showRefresh: false,
            showColumns: false,
            showToggle:false,
            url: ctx + "vari/pageList",
            createUrl: ctx+ "page/confs/groupAdd",
            updateUrl:  ctx+"page/confs/groupEdit",
            removeUrl:   ctx+"group/remove",
            modalName: "变量列表",
            columns: [{
                checkbox: true

            },
                {
                    field: 'id',
                    visible: false
                },
                {
                    field: 'variTypeName',
                    title: '变量类型'
                },
                {
                    field: 'variName',
                    title: '变量名称'
                },
                {
                    field: 'variKey',
                    title: '变量标识'
                },
                {
                    field: 'variValue',
                    title: '变量值'
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="openEdit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }

    //
    $("#form-role-add").validate({
        rules:{
            variName:{
                required:true
            },
            variKey:{
                required:true
            },
            variValue:{
                required:true
            }
        },
        messages: {
            "variName": {
                required: "编码名称不能为空"
            },
            "variKey": {
                remote: "变量标识不能为空"
            },
            "variValue": {
                remote: "变量值不能为空"
            }
        },
        focusCleanup: true
    });
    
    function  openAdd() {
        $('#form-role-add')[0].reset();
        $('#myModal').modal('show');
    }

    /**
     * 开始保存
     * @param id
     */
    function openEdit(id) {
        $.ajax({
            cache : true,
            type : "GET",
            url : ctx + "vari/getById?id="+id,
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.each(data.data, function(key, value) {
                    var inputElement = $('[name="' + key + '"]'); // 选择与对象属性名称相同的表单字段
                    if (inputElement.length > 0) {
                        inputElement.val(value); // 设置表单字段的值
                    }
                });
                $('#myModal').modal('show');
            }
        });
    }

    function save() {
        if (!$.validate.form()) {
            return;
        }
        // 获取表单数据并转换为 JSON
        var formData = $("#form-role-add").serializeArray(); // 获取表单字段的数组
        var jsonData = {};

        // 遍历表单数据数组，构建 JSON 对象
        $.each(formData, function() {
            jsonData[this.name] = this.value;
        });
        $.ajax({
            cache : true,
            type : "POST",
            contentType: "application/json",
            url : ctx + "vari/saveData",
            data : JSON.stringify(jsonData),
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                if(data.code != '0000'){
                    $.modal.alertError(data.msg);
                }else {
                    $.modal.alertSuccess("保存成功！");
                    $('#myModal').modal('hide');
                    $.form.reset()
                }

            }
        });

    }

</script>
</body>
</html>